import SVGAccount from '@mdi/svg/svg/account.svg';
import { Select, Toast, Dialog, List, Button, PopList } from '../imports';
import { bar } from '../style.css';

const DATA = [
	{
		text: '数据1',
		value: 1,
		desc: '数据1描述',
		children: [
			{
				text: '数据1-1',
				value: 11,
				desc: '数据1-1描述',
			},
			{
				text: '数据1-2',
				value: 12,
				desc: '数据1-2描述',
				children: [
					{
						text: '数据1-2-1',
						desc: '数据1-2-1描述',
						value: 121,
					},
					{
						text: '数据1-2-2',
						desc: '数据1-2-2描述',
						value: 122,
					},
				],
			},
		],
	},
	{
		text: '数据2',
		value: 2,
		desc: '数据2描述',
	},
	{
		text: '数据3',
		value: 3,
		desc: '数据3描述',
		expand: true,
		children: [
			{
				text: '数据3-1',
				desc: '数据3-1描述',
				value: 31,
			},
			{
				text: '数据3-2',
				desc: '数据3-2描述',
				value: 32,
				children: [
					{
						text: '数据3-2-1',
						desc: '数据3-2-1描述',
						value: 321,
					},
					{
						text: '数据3-2-2',
						desc: '数据3-2-2描述',
						value: 322,
					},
				],
			},
		],
	},
];

export function SelectPage() {
	const resultDiv = (<div style={{ padding: '1em' }}></div>) as HTMLDivElement;
	let selected: unknown[] | undefined;
	return (
		<>
			<h2>选择框</h2>
			<div class={bar}>
				<Select
					showClear
					value="选项1"
					options={['选项1', '选项2', '选项3']}
					ref={(s) => {
						s.set('onChange', (value) => {
							Toast.show(value + '');
						});
					}}
				/>
				<Select
					placeholder="移动端样式"
					showClear
					options={['选项1', '选项2', '选项3']}
					onChange={(value) => {
						Toast.show(value + '');
					}}
				/>
				<Select
					showClear
					placeholder="选择框..."
					column={{
						children: 'children',
						expand: 'expand',
					}}
					options={DATA}
				/>
				<Select
					showClear={true}
					suffixIcon={SVGAccount}
					placeholder="自定义选择框，选人..."
					onPopup={() => {
						return new Promise((resolve) => {
							const dlg = Dialog.create(
								<List
									activable={true}
									column={{
										value: 'value',
										text: 'text',
										expand: 'expand',
										children: 'children',
									}}
									rows={DATA}
									ref={(l) => {
										l.onRowClick(() => {
											const result = {
												value: l.activeValue,
												text: l.activeText + '',
											};
											dlg.close();
											resolve(result);
										});
									}}
								/>
							)
								.setAutoClose(true)
								.show()
								.onClose(() => {
									resolve(null);
								});
						});
					}}
				/>
				<hr />
				<Button
					onClick={function () {
						const handler = PopList.show(DATA, {
							columnOption: { value: 'value', text: 'text', children: 'children', expand: 'expand' },
							resultFullPath: true,
							refer: this,
							width: 300,
						});
						handler.onSelect((value, text, row) => {
							resultDiv.textContent = text + '';
						});
					}}
				>
					弹出选择框返回全路径
				</Button>
				{resultDiv}
				<hr />
				<Button
					onClick={function () {
						const handler = PopList.show(DATA, {
							columnOption: { value: 'value', text: 'text', children: 'children', expand: 'expand' },
							resultTextField: 'desc',
							width: '30em',
							refer: this,
						});
						handler.onSelect((value, text, row) => {
							resultDiv.textContent = text + '';
						});
					}}
				>
					弹出选择框返回指定字段
				</Button>
				<hr />
				<Button
					onClick={function () {
						const handler = PopList.show(DATA, {
							columnOption: { value: 'value', text: 'text', children: 'children', expand: 'expand' },
							resultFullPath: true,
							width: '30em',
							refer: this,
							multiSelect: true,
							useAction: true,
							useSearch: true,
							selected,
							noSelectField: 'children',
							multiSelectType: 'cascade-leaf',
						});
						handler.onSelectMultiple((selection) => {
							selected = selection.map((s) => ({ value: s.value }));
							resultDiv.textContent = JSON.stringify(selection);
						});
					}}
				>
					弹出多选返回全路径
				</Button>
			</div>
		</>
	);
}
